<template>
  <div class="service">
    <van-nav-bar
      :title="t('service.title')"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="question-o" size="20" @click="showHelp" />
      </template>
    </van-nav-bar>
    
    <!-- 顶部横幅 -->
    <div class="service-banner">
      <div class="banner-content">
        <div class="banner-icon">
          <van-icon name="service-o" size="32" />
        </div>
        <div class="banner-text">
          <div class="banner-title">{{ t('service.banner.title') }}</div>
          <div class="banner-desc">{{ t('service.banner.desc') }}</div>
        </div>
      </div>
    </div>
    
    <div class="content">
      <!-- 服务菜单网格 -->
      <div class="service-grid">
        <div 
          v-for="item in serviceItems"
          :key="item.path"
          class="service-card"
          @click="handleNavigate(item)"
        >
          <div class="card-icon" :class="item.iconClass">
            <van-icon :name="item.icon" size="32" />
          </div>
          <div class="card-title">{{ t(item.title) }}</div>
          <div class="card-desc">{{ t(item.desc) }}</div>
        </div>
      </div>
      
      <!-- 快速联系 -->
      <div class="quick-contact">
        <div class="section-title">{{ t('service.quickContact.title') }}</div>
        <div class="contact-card">
          <div class="contact-item">
            <van-icon name="phone-o" class="contact-icon" />
            <div class="contact-info">
              <div class="contact-label">{{ t('service.quickContact.phone') }}</div>
              <div class="contact-value">010-1132546</div>
            </div>
            <van-button size="small" type="primary" plain @click="callPhone">
              {{ t('service.quickContact.call') }}
            </van-button>
          </div>
          
          <div class="contact-item">
            <van-icon name="service-o" class="contact-icon" />
            <div class="contact-info">
              <div class="contact-label">{{ t('service.quickContact.online') }}</div>
              <div class="contact-value">{{ t('service.quickContact.available') }}</div>
            </div>
            <van-button size="small" type="success" plain @click="openChat">
              {{ t('service.quickContact.chat') }}
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import { getStoredLanguage } from '../../utils/language'

const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()

// 获取当前语言 - 优先级：URL参数 > localStorage > 默认英文
const currentLang = route.query.lang || getStoredLanguage()

// 生成带语言参数的路径
const getLocalizedPath = (path) => {
  return {
    path: path,
    query: { lang: currentLang }
  }
}

const serviceItems = [
  {
    title: 'service.expert.title',
    desc: 'service.expert.desc',
    path: '/service/expert',
    icon: 'service-o',
    iconClass: 'icon-expert'
  },
  {
    title: 'service.faq.title',
    desc: 'service.faq.desc',
    path: '/servicefaq',
    icon: 'question-o',
    iconClass: 'icon-faq'
  },
  {
    title: 'service.repair.title',
    desc: 'service.repair.desc',
    path: '/repair',
    icon: 'setting-o',
    iconClass: 'icon-repair'
  },
  {
    title: 'service.video.title',
    desc: 'service.video.desc',
    path: '/service/video',
    icon: 'video-o',
    iconClass: 'icon-video' 
  }
]

const handleNavigate = (item) => {
  router.push(getLocalizedPath(item.path))
}

const showHelp = () => {
  // TODO: 显示帮助信息
}

const callPhone = () => {
  window.location.href = 'tel:010-1132546'
}

const openChat = () => {
  // TODO: 打开在线客服
}

const onClickLeft = () => {
  // 返回首页时保留语言参数
  router.push({
    path: '/',
    query: { lang: currentLang }
  })
}
</script>

<style scoped lang="scss">
.service {
  min-height: 100vh;
  background: linear-gradient(180deg, #f0f9ff 0%, #f7f8fa 100%);
  padding-bottom: 20px;
}

// 顶部横幅
.service-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 16px;
  padding: 24px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-content {
  display: flex;
  align-items: center;
  color: #fff;
}

.banner-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.banner-text {
  flex: 1;
}

.banner-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-desc {
  font-size: 13px;
  opacity: 0.95;
}

.content {
  padding: 0 16px;
}

// 服务网格
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.service-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  animation: scaleIn 0.5s ease-out;
  
  &:active {
    transform: translateY(2px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #fff;
  transition: transform 0.3s;
  
  .service-card:active & {
    transform: scale(0.95);
  }
}

.icon-expert {
  background: linear-gradient(135deg, #1989fa 0%, #0e6fd6 100%);
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
}

.icon-faq {
  background: linear-gradient(135deg, #ff976a 0%, #ff7544 100%);
  box-shadow: 0 4px 12px rgba(255, 151, 106, 0.3);
}

.icon-repair {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.icon-video {
  background: linear-gradient(135deg, #07c160 0%, #05a050 100%);
  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #323233;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 12px;
  color: #969799;
  line-height: 1.4;
}

// 快速联系
.quick-contact {
  margin-top: 20px;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  color: #323233;
  margin-bottom: 12px;
  position: relative;
  padding-left: 12px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
  }
}

.contact-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  
  &:not(:last-child) {
    border-bottom: 1px solid #f7f8fa;
  }
}

.contact-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
  color: #1989fa;
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 13px;
  color: #969799;
  margin-bottom: 4px;
}

.contact-value {
  font-size: 15px;
  font-weight: 600;
  color: #323233;
}

// 优化按钮样式
:deep(.van-button) {
  border-radius: 16px;
  font-weight: 500;
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.96);
  }
}
</style> 